<template>
	<view>
		<page-meta>
		    <navigation-bar
		      :title="nbTitle"
		      :title-icon="titleIcon"
		      :title-icon-radius="titleIconRadius"
		      :subtitle-text="subtitleText"
		      :subtitle-color="nbFrontColor"
		      :loading="nbLoading"
		      :front-color="nbFrontColor"
		      :background-color="nbBackgroundColor"
		      :color-animation-duration="2000"
		      color-animation-timing-func="easeIn"
		    />
		</page-meta> 
		<view>
			<view>
				<u-calendar v-model="show" :mode="mode"></u-calendar>
				<u-button @click="show = true">选择时间</u-button>
			</view>
			 <view class="charts-box">
			    <qiun-data-charts type="column" :chartData="chartData" />
			  </view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				 chartData: {},
				//
				mobile: '',
				code: '',
				list:'',
				nbTitle: '能耗统计',
				titleIcon: '/static/logo.png',
				titleIconRadius: '20px',
				subtitleText: 'subtitleText',
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#ffffff',
				
				show:false,
				mode:"date",
				//  能耗对比
				yestoday:"",
				lastMonth:"",
				lastyear:"",
				
			}
		},
		onReady() {
		    this.getServerData();
		  },
		methods: {
			 getServerData() {
			      //模拟从服务器获取数据时的延时
			      setTimeout(() => {
			        let res = {
			            categories: ["1","2","3","4","5","6"],
			            series: [
			              {
			                name: "本月节能",
			                data: [35,36,31,33,13,34]
			              },
			              {
			                name: "上月节能",
			                data: [18,27,21,24,6,28]
			              }
			            ]
			          };
			        this.chartData = JSON.parse(JSON.stringify(res));
			      }, 500);
			    },
		}
	}
</script>

<style  scoped>
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>
